﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <link href="/plugins/jquery.treeview.css" rel="stylesheet" type="text/css" />
    <link href="/plugins/CheckList/ui.dropdownchecklist.themeroller.css" rel="stylesheet" />
    <link href="/plugins/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-inherit.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-listbox.js" type="text/javascript"></script>
    <script src="/plugins/CheckList/ui.dropdownchecklist.js" type="text/javascript"></script>
    <script src="/plugins/jquery.treeview.js" type="text/javascript"></script>
    <script src="/plugins/jquery.treeview.edit.js" type="text/javascript"></script>
    <script src="/plugins/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="/plugins/jquery.ui.position.js" type="text/javascript"></script>
    <script type="text/javascript">
    var myLayout;
    var mysupLayout;
    var helper = new Helper();
        $(document).ready(function () {

        //loadFrm("/page/userManagement.htm");

            myLayout = $('body').layout({
                    center__paneSelector:	".outer-center" 
		,	west__paneSelector:		".outer-west" ,
                west__size: 234
		, east__size: 300
                // RESIZE Accordion widget when panes resize
		, west__onresize: $.layout.callbacks.resizePaneAccordions
		, east__onresize: $.layout.callbacks.resizePaneAccordions
            });
            initStep2();
            $('ul.dropdown').jdMenu();
            // ACCORDION - in the West pane
            $("#accordion1").accordion({ fillSpace: true });

            // ACCORDION - in the East pane - in a 'content-div'
            $("#accordion2").accordion({
                fillSpace: true
		, active: 1
            });


            // THEME SWITCHER
            addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
            // if a new theme is applied, it could change the height of some content,
            // so call resizeAll to 'correct' any header/footer heights affected
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
            setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */

            showLayout('1');
           
        });
        function initStep2(parameters) {
           // alert('inistep2');
              mysupLayout = $('.outer-center').layout({
                center__paneSelector:	".inner-center" 
                , west__paneSelector:		".inner-west"
                ,west__size: '40%' 
                ,south__size:'50%'
                });
        }
        function showLayout(step, docid) {
            switch (step) {
                case '1':
                    ApproverMappingSaleInit();
                    
                    break;

                case '2':
                    
                    break;
            }
        }

        function ApproverMappingSaleInit(parameters) {
            $("#Options").dropdownchecklist();
           ApprovaerInit();
           SaleInit();
         
           //Init button
            $("#btnProdSave")
			.button({
                 
                icons: {
                    primary: "ui-icon-save"
                },
            })
			.click(function () {

			    var approver = {username: ApproverUser, display: ApproverDisplay };
			    var sales = getSaleSelect();
			    getTreeviewApprovalMappingData(approver,sales);
			    renderTreeViewApprovalMapping();
			});
           
           $("#btnProdFinish")
			.button({
                 
                icons: {
                    primary: "ui-icon-save"
                },
            })
			.click(function () {

			    var mapping = getApprovalMappingData();
			    helper.UpdateApprovalMapping(mapping, function(data) {
			        alert(data);
			    });
			});
            
            $("#ButtonSearch").button({
                 
                icons: {
                    primary: "ui-icon-search"
                }
            })
			.click(function () {
			   
			        SaleCoInit();
			});
           
        }

        var ApproverUser;
        var ApproverDisplay;
        var SaleCoListBoxItem = JSListBox.Item.extend({

			text: "",
			kvalue: "",
			init: function(text,value) {
				this.text = text;
			    this.kvalue = value;
			},

			render: function() {
				return '<a value='+ this.kvalue + ' href="#">' + this.text + '</a>';
			},
			
			onClick: function() {
				ApproverUser= this.kvalue;
			    ApproverDisplay = this.text;
				//alert(item.value);
			},
			
			onDblClick: function() {
				var item = new JSListBox.Item();
				item.kvalue = this.text + " item double clicked.";
				item.enabled = false;
				//alert(item.value);
			}
			
		});

        function ApprovaerInit() {
            salesCo = [];
            salesCoList = [];
            helper.GetAllApprover(function(data) {
                var saleco = data.AllApprover;
                window.listBoxAllItems = new JSListBox({ 'containerSelector': 'ListBoxApproverItems' });
                $.each(saleco, function(key, value) {
                    salesCoList.push(new SaleCoListBoxItem(value["FirstName"] + ' ' + value["Lastname"], value["UserName"]));
                });
                window.listBoxAllItems.addItems(salesCoList);
            });
        }
        
        function SaleInit() {
            var sales = [];
            var htmlcomp = '';
            var htmltemplate = '<li class="ui-menu-item" ><div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="padding: 0.2em 0.4em;"><input type="checkbox" tabindex="0" class="active" id="ddcl-Options-i0" index="0"value="{0}"><label for="ddcl-Options-i0" class="ui-dropdownchecklist-text"style="cursor: default; font-size:12px; padding: 0.2em 0.4em;">{1}</label></div></li>';
            helper.GetAllSale(function(data) {
                sales = data.AllSale;
                $.each(sales, function(key, value) {
                    htmlcomp += htmltemplate.format(value.UserName, value.FirstName +' ' + value.Lastname);
                });

                $('#saleChecklist ul').html(htmlcomp);

            });
        }
        

        function getSaleSelect() {
           var sales = [];
               $('#saleChecklist li input:checked').each(function(value) {
                   sales.push({ display: $(this).next().text(), username: $(this).val()});
               });
               return sales;
          
       
       }
        
        function getTreeviewApprovalMappingData(approver, sales) {
            var treeviewHtml = $('#browser').html();
            var htmlSaleLevel = '<li><span class="file sale" role="sale" approverUsername="{2}"  saleUsername="{1}">{0}</span></li>';
            var htmlSaleComplete = '';
            var htmlApproverLevel = '<li><span class="folder" role="approver" ">{0}</span><ul>';

            $.each(sales, function(key, value) {
                htmlSaleComplete = htmlSaleComplete + htmlSaleLevel.format(value.display,value.username, approver.username);
            });
            var complete = htmlApproverLevel.format(approver.display) + htmlSaleComplete + '</ul></li>';
            $('#browser').html(treeviewHtml + complete);
            
        }
            var kk;
        function renderTreeViewApprovalMapping() {
            $('#browser').treeview();
            //$("#browser").contextMenu();
            $("#browser").bind("contextmenu", function(event) {
                
				if ($(event.target).is("li") || $(event.target).parents("li").length) {
				    if (confirm('Do you want to remove this user?'))
				    { 

                    kk = $(event.target);
					$("#browser").treeview({
						remove: $(event.target).parents("li").filter(":first")
					});
				        }
					return false;
				}
			});
        }
            
        function getApprovalMappingData() {
            var approvalMappingList = [];
            $('#browser span[role="sale"]').each(function(i) {
                
                var approverUserName = ($(this).attr('approverUsername'));
                var saleUserName = ($(this).attr('saleUsername'));

                approvalMappingList.push({ SaleUsername: saleUserName, ApprovalUserName: approverUserName });
                
            });
            return approvalMappingList;
        }
        
    
    </script>
</head>
<body>

        <div class="inner-center">
            <div style="height: 20px;">
            </div>
            <div id="saleChecklist" class="ui-widget ui-widget-content ui-corner-all" style="width: 50%;
                height: 80%; margin-left: 50px; margin-bottom: 10px; overflow: auto;">
                <div class="ui-widget-header" style="width: 99%;">
                    Sale:
                </div>
                <ul>
                </ul>
            </div>
            <div style="margin-left: 50px;">
                <button id="btnProdSave">
                    ADD</button>
            </div>
        </div>
        <div class="inner-west">
            <div class="DCTextClass ">
                Approver :
                <input id="TextDCtex" type="text" class="ui-widget ui-widget-content ui-corner-all ui-menu-item" />
                <button id="ButtonSearch">
                    Search</button>
            </div>
            <div id="ListBoxApproverItems" style="height: 80%;">
            </div>
        </div>
        <div class="ui-layout-south">
            <div id="DocumentListApprovalStep">
                <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
                    <span style="float: left">Approver Mapping List</span>
                </div>
                <div id="treeviewApprovalMapping" style="text-align: center; float: left">
                    <ul id="browser" class="filetree">
                    </ul>
                </div>
                <div style="float: right">
                    <button id="btnProdFinish">
                        Finish</button>
                </div>
            </div>
        </div>
   
</body>
</html>
